<html>
    
<head>
            
    <meta charset="utf-8">
            <title></title>
    <script src="../vue/vue.js"></script>
    <style type="text/css">
                    .Tim {
            width: 100px;
             height: 30px;
            background: #2AABD2;
            border: 0;
            border-radius: 4px;
            color: #FFFFFF;
            font-size: 12px;
        }
    </style>
      
</head>
    
<body>
        
<div id="box">
    <button @click="tap()" class="Tim">{{ content }}</button>
</div>
    
</body>
    
<script type="text/javascript">
    const app = new Vue({
        el: "#box",
        data: {
            content: '发送验证码',
            totalTime: 10,
            canClick: true
        },
        methods: {
            tap() {
                if (!this.canClick) return; //改动的是这两行代码
                this.canClick = false;
                this.content = this.totalTime + 's重新发送';
                let clock = window.setInterval(() => {
                    this.totalTime--;
                    this.content = this.totalTime + 's重新发送';
                    if (this.totalTime < 0) {
                        window.clearInterval(clock);
                        this.content = '重新发送验证码';
                        this.totalTime = 10;
                        this.canClick = true;   //这里重新开启
                    }
                }, 1000)
            }
        }
    })
</script>
</html>